<template>
  <div>
    <van-notice-bar
      left-icon="volume-o"
      text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
    />

    <van-collapse v-model="activeNames">
      <van-collapse-item title="标题1" name="1">
        代码是写出来给人看的，附带能在机器上运行。
      </van-collapse-item>
      <van-collapse-item title="标题2" name="2">
        技术无非就是那些开发它的人的共同灵魂。
      </van-collapse-item>
      <van-collapse-item title="标题3" name="3">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
    </van-collapse>
    <van-button type="danger" @click="showD">危险按钮</van-button>
    <van-button type="warning">警告按钮</van-button>

    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <!-- <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <van-button @click="getInfo" type="primary">获取数据</van-button> -->
    <h1 style="text-align: center">欢迎来到文章修改，删除后台</h1>
    <div class="table">
      <table>
        <tr>
          <th>标题</th>
          <th>简介</th>
          <th>内容</th>
          <th>分类</th>
          <th>操作</th>
        </tr>

        <tr v-for="(item, index) in Info" :key="index">
          <!-- Info数据是通过axios在页面渲染之前就开始请求的 -->
          <td>
            <MyTag
              :value="item.title"
              :itemId="item.id"
              @input="handleInput($event, item.id, 'title')"
            />
          </td>

          <td>
            <MyTag
              :value="item.summary"
              :itemId="item.id"
              @input="handleInput($event, item.id, 'summary')"
            />
          </td>
          <td>
            <MyTag
              :value="item.content"
              :itemId="item.id"
              @input="handleInput($event, item.id, 'content')"
            />
          </td>
          <td>
            <MyTag
              :value="item.collection"
              :itemId="item.id"
              @input="handleInput($event, item.id, 'collection')"
            />
          </td>

          <td><button @click="deleteInfo(item.id)">删除</button></td>
        </tr>
      </table>

      <van-cell-group inset>
        <van-field v-model="number" label="输入学号查询" placeholder="学号" />
      </van-cell-group>

      <van-button @click="searchInfo" type="primary">查询</van-button>

      <tr v-for="(item, index) in searchResult" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.summary }}</td>
        <td>{{ item.content }}</td>
      </tr>
    </div>
    <ImageUpload></ImageUpload>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// import ImageUpload from '@/views/ImageUpload.vue'
import axios from 'axios'
import MyTag from '@/views/MyTag.vue'
import { showToast } from 'vant'
import { showDialog } from 'vant'
import { showNotify } from 'vant'

// const username = ref('')
// const password = ref('')
const number = ref('')
const searchResult = ref('')
const Info = ref('')
const activeNames = ref(['1'])

onMounted(() => {
  getInfo()
})

const showD = () => {
  showNotify({ message: '请填写完整信息' })
  showToast('请填写完整信息')
}
// const handleinput = (value) => {
//   console.log(value)
//   console.log('子传父')
// }

const handleInput = (newValue, id, field) => {
  const item = Info.value.find((item) => item.id === id) //根据传来的id，到Info数组中找到对应的数据
  if (item) {
    //如果查找到了，
    // 更新 Info 数组中的相应项
    const updatedItem = { ...item, [field]: newValue }
    const index = Info.value.findIndex((i) => i.id === id)
    if (index !== -1) {
      Info.value[index] = updatedItem
    }
    console.log('更新后的数据', updatedItem)

    // 调用后台接口更新数据
    axios
      .post('http://localhost:3000/api/update', updatedItem)
      .then((res) => {
        console.log('更新成功', res)
        showToast('更新成功')
      })
      .catch((err) => {
        console.error('更新失败', err)
      })
  }
}

//提交数据
// const onSubmit = () => {
//   axios
//     .post('http://localhost:3000/api/add', {
//       username: username.value,
//       password: password.value
//     })
//     .then((res) => {
//       console.log(res)

//       getInfo()
//     })
//     .catch((err) => {
//       if (err.response.status === 400) {
//         alert('用户名已存在')
//       }
//       if (err.response.status === 500) {
//         console.log('服务器错误')
//         alert('服务器错误')
//       }
//     })
// }

//获取数据
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const getInfo = () => {
  axios
    .get('http://localhost:3000/api/get')
    .then((res) => {
      console.log(res)
      Info.value = res.data
      console.log(Info.value)
      userStore.setInfo(res.data)
    })
    .catch((err) => {
      console.log(err)
    })
}

//删除数据
const deleteInfo = (index) => {
  console.log('删除', index)
  axios

  axios.delete(`http://localhost:3000/api/delete/${index}`).then((res) => {
    console.log(res)

    showNotify({ type: 'success', message: '通知内容' })

    getInfo()
  })
}

//查询数据

// const searchInfo = () => {
//   if (!number.value) {
//     alert('请输入学号')
//     return
//   }
//   axios
//     .get(`http://localhost:3000/api/search/${number.value}`)
//     .then((res) => {
//       console.log(res)
//       searchResult.value = res.data
//       console.log(searchResult.value)
//       showToast('查找成功')
//       showNotify({ message: '请填写完整信息' })
//     })

//     .catch((err) => {
//       if (err.response.status === 404) {
//         alert('用户不存在')
//       }
//     })
// }
</script>

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
table th {
  background-color: #f2f2f2;
}
table td {
  border: 3px solid skyblue;
}
table td {
  height: 300px; /* 固定高度 */
  width: 25%; /* 平均分配宽度 */

  overflow-y: auto;
}
textarea {
  width: 100%;
  height: 300px; /* 默认高度 */
  border: 0;
  box-sizing: border-box; /* 确保宽度计算包含内容 */
  resize: none; /* 禁止用户手动调整大小 */
  overflow-y: auto; /* 超出内容时显示滚动条 */
}
</style>
